<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-color-selector-bar
                title="前景色"
                desc="bcolor=xx/颜色值"
                v-model="color"
            ></uxt-color-selector-bar>
            <uxt-color-selector-bar
                title="背景色"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
            ></uxt-color-selector-bar>
            <uxt-bar title="角标内容" desc="badge">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="badge"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="自定义图标" desc="slot=badge">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="icon"
                    ></uxt-input>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-badge :badge="badge" :color="color" :bg-color="bgColor">
                    <template slot="badge" v-if="icon">
                        <uxt-icon :type="icon"></uxt-icon>
                    </template>
                    <view class="bg-theme" style="width: 100rpx; height: 100rpx;"></view>
                </uxt-badge>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtIcon from '@xtcoder/uxt/components/uxt-icon.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtBadge from '@xtcoder/uxt/components/uxt-badge.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtIcon,
        uxtInput,
        uxtColorSelectorBar,
        uxtBadge
    },
    data() {
        return {
            title: '角标',
            color: '',
            bgColor: 'red',
            badge: '-',
            icon: ''
        }
    }
}
</script>

<style lang="scss" scoped></style>
